<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <el-form ref="formData" :model="formData" label-width="100px" label-position="right">
            <el-form-item label="标题：">
                <el-input v-model="formData.title" readonly></el-input>
            </el-form-item>
            <el-form-item label="标签：">
                <!-- 注：1.样式“display:block”的作用是把这个级联选择器设置为块级元素，让它在显示时独占一行；2.“emitPath:false”表示“只返回该节点的值（此处为“ID”值）（即‘最后一级路径’），不返回由该节点所在的各级菜单的值所组成的数组”↓ -->
                <el-cascader style="display:block" v-model="formData.labelIds" :options="labelOptions" :props="{multiple:true,children:'labelList',value:'id',label:'name',emitPath:false}" clearable disabled></el-cascader>
            </el-form-item>
            <el-form-item label="主图：">
                <img :src="formData.imageUrl" style="width:178px;height:178px;display:block"/>
            </el-form-item>
            <el-form-item label="是否公开：">
                <el-radio-group v-model="formData.ispublic" style="margin-left:55px" disabled>
                    <el-radio :label="1">公开</el-radio>
                    <el-radio :label="0">不公开</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="简介：">
                <el-input type="textarea" v-model="formData.summary" readonly></el-input>
            </el-form-item>
            <el-form-item label="内容：">
                <mavonEditor v-model="formData.mdContent" :editable="false"/>
            </el-form-item>
            <el-form-item align="center" v-if="isAudit" id="footer">
                <el-button type="primary" @click="auditSuccess()">审核通过</el-button>
                <el-button type="danger" @click="auditFail()">审核不通过</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import api from '@/api/article'
import categoryApi from '@/api/category'
// 引入“markdown”编辑器“mavonEditor”的组件和样式↓
import {mavonEditor} from 'mavon-editor'; // ←注意：左边这项在“mavon-editor”的官网上的写法是错误的（因为“mavon-editor”的内部可能有多个组件，所以在导入组件时我们必须要在“mavonEditor”的外层套上大括号（即把“mavon-editor”解构），这样才能导入“mavon-editor”中的“mavonEditor”组件）
import 'mavon-editor/dist/css/index.css';
export default {
    // 把“mavonEditor”注册为当前组件的子组件↓
    components:{mavonEditor},
    props:{
        id:null, // ←左边这项表示“文章的ID”
        isAudit:true, // ←左边这项表示“是否为‘审核文章’对话框”
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        remoteClose:Function // ←左边这项被用来关闭对话框
    },
    data() {
        return {
            formData:{ // ←左边这项表示“查询到的文章详情”
            },
            labelOptions:[], // ←左边这项表示被用来渲染分类和标签的“下拉框/级联选择器”
            
        }
    },
    watch:{ 
        dialogVisible(value){ // 注：←左边这项被用于监听“dialogVisible”的变化，并且会把改变后的值“value”作为参数传入
            if(value){
                this.getLabelOptions()
                // 若“value”为“true”则打开对话框并查询文章详情↓
                this.getArticleById()
            }
        }
    },
    methods: {
        // 关闭对话框
        handleClose(){
            this.remoteClose() // ←左边这项表示通过触发父组件中的名为“remoteClose”的事件函数来关闭对话框
        },
        // 点击“审核通过”按钮时触发的方法
        auditSuccess(){
            this.$confirm('确认审核通过吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送审核通过请求
                api.auditSuccess(this.id).then(response => { // ←注：因为是当前vue实例中的id，所以左边这一项的括号中不能直接写“id”，而是要写“this.id”
                    this.$message({
                            message:'审核通过',
                            type:'success',
                            center:true
                        })
                    // 关闭对话框
                    this.remoteClose()
                })
            }).catch(() => {
                // 点击“取消”按钮，取消审核。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        // 点击“审核不通过”按钮时触发的方法
        auditFail(){
            this.$confirm('确认审核不通过吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送审核不通过请求
                api.auditFail(this.id).then(response => { // ←注：因为是当前vue实例中的id，所以左边这一项的括号中不能直接写“id”，而是要写“this.id”
                    this.$message({
                            message:'审核不通过',
                            type:'error',
                            center:true
                        })
                    // 关闭对话框
                    this.remoteClose()
                })
            }).catch(() => {
                // 点击“取消”按钮，取消审核。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        // 查询文章详情
        async getArticleById(){
            const {data} = await api.getById(this.id) // ←注：左边这项采用了“解构赋值”的形式（具体为返回的“response.data”的值被赋值给了“{data}”中的“data”）
            this.formData = data
        },

        async getLabelOptions(){
            const {data} = await categoryApi.getCategoryAndLabel() // 同上↑
            this.labelOptions = data
            console.log('this.labelOptions',this.labelOptions)
        }
    },
}
</script>
<style lang="scss" scoped>
    div #footer{::v-deep.el-form-item__content{margin-left: 0px !important;}}/* ←注：左边这行样式中的“!important”的作用是提高这行样式在被应用时的优先级，使“element.style”样式失效 */
</style>